<template>
  <div class="faxianfive">
    <div class="remengf">热门活动</div>
    <div class="banxinghe">
      <div class="banxingf" v-for="(v, i) in arr5" :key="i">
        <div class="jianduziimg">
          <img :src="v.img" alt="" />
        </div>
        <div class="jianduzitext">
          <span class="miaozhao">{{v.text1}}</span>
          <span class="huodong">
            <i>{{v.text2}}</i
            >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{v.text3}}
          </span>
        </div>
      </div>
    </div>
    <div class="banxinghe">
      <!-- <div class="banxingf">
        <div class="jianduziimg">
          <img :src="v.img" alt="" />
        </div>
        <div class="jianduzitext">
          <span class="miaozhao">月跑量挑战</span>
          <span class="huodong">
            <i>活动</i
            >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;然跑赢 HUAWEI
            WATCH GT 33
          </span>
        </div>
      </div> -->
    </div>
    <div class="banxinghe">
      <!-- <div class="banxingf">
        <div class="jianduziimg">
          <img src="../../assets/img/19.gif" alt="" />
        </div>
        <div class="jianduzitext">
          <span class="miaozhao">初春健走3</span>
          <span class="huodong">
            <i>活动</i
            >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;健走6000步
            ,赢 HUAWEI WATCH GT 3
          </span>
        </div>
      </div> -->
    </div>
  </div>
</template>

<script>
import getlink from "../../apis/getapi"
export default {
    data() {
        return {
            arr5:[],
        }
    },
    mounted() {
        getlink("/data/list/xiaoming").then((ok)=>{
            console.log(ok.data.faxianfive);
            this.arr5 = ok.data.faxianfive;
        })
    }
}
</script>

<style scoped>
.faxianfive {
  position: relative;
  width: 100%;
  height: 10.5rem;
  background: #f3f3f5;
}
.remengf {
  width: 90%;
  height: 0.3rem;
  margin: auto;
  font-size: 0.2rem;
}
.banxingf {
  width: 90%;
  height: 2.9rem;
  margin: auto;
  border-radius: 0.2rem 0.2rem 0rem 0rem;
  margin-bottom: 0.2rem;
}
.banxinghe {
  width: 100%;
  height: 3.2rem;
}
.jianduziimg {
  width: 100%;
  height: 2rem;
  border-radius: 0.2rem 0.2rem 0rem 0rem;
}
.jianduziimg img {
  width: 100%;
  height: 100%;
  border-radius: 0.2rem 0.2rem 0rem 0rem;
}
.jianduzitext {
  display: flex;
  flex-direction: column;
  widows: 100%;
  height: 1.1rem;
  border-radius: 0rem 0rem 0.2rem 0.2rem;
  background: #fff;
}
.miaozhao {
  display: flex;
  display: inline-block;
  width: 100%;
  height: 0.5rem;
  font-size: 0.25rem;
  line-height: 0.5rem;
}
.huodong {
  display: flex;
  display: inline-block;
  width: 100%;
  height: 0.6rem;
  font-size: 0.15rem;
  line-height: 0.4rem;
  border-radius: 0rem 0rem 0.2rem 0.2rem;
}
.huodong i {
  display: flex;
  display: inline-block;
  margin-bottom: 0rem;
  width: 0.4rem;
  height: 0.2rem;
  position: absolute;
  font-size: 0.15rem;
  line-height: 0.2rem;
  margin-top: 0.1rem;
  background: #f09658;
}
</style>